<template>
  <div class="page-container">
    <div class="map-wrapper">
      <div class="title-wrapper flex">
        <div class="car">车辆【{{ car.licenseNo || '-' }}】的位置</div>
        <div class="msg">位置信息最后更新时间：{{ cargps.locationTime || '-' }}</div>
      </div>
      <div class="bottom">
        <div id="mapContainer" class="map"></div>
      </div>
    </div>
  </div>
</template>

<script setup name="CarBoxUseLocation">
  import { loadMapScript } from '@/utils/loadMap'
  import { ref, onMounted, nextTick } from 'vue'
  import { vehicleGPS } from '@/api/asset/vehicle'
  import { getCarTboxVehicleDetail } from '@/api/asset/carTbox'

  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routePrams = route.params

  const map = ref(null)

  // 获取gps数据
  const cargps = ref({})
  const getgps = () => {
    vehicleGPS({ licenseNo: car.value.licenseNo, vehicleNum: car.value.vehicleNum }).then((res) => {
      cargps.value = res.result

      // 加载地图
      loadMapScript().then(() => {
        nextTick(() => {
          init()
        })
      })
    })
  }

  // 获取车辆详情
  const car = ref({})
  const getDetail = (id) => {
    getCarTboxVehicleDetail({ id: id }).then((res) => {
      car.value = res.result
      getgps()
    })
  }

  onMounted(() => {
    const id = routePrams.id
    getDetail(id)
  })

  const init = async () => {
    await polyfillNewMap()
  }

  // 初始化地图
  const polyfillNewMap = (config = {}, containerId = 'mapContainer') => {
    const { center = [cargps.value.longitude, cargps.value.latitude], zoom = 16 } = config
    map.value = new AMap.Map(containerId, {
      center,
      zoom,
      ...config,
    })

    AMap.plugin(['AMap.ToolBar'], function () {
      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      map.value.addControl(
        new AMap.ToolBar({
          // 简易缩放模式，默认为 false
          liteStyle: true,
          // position: 'LB',
        })
      )
    })

    var geocoder = new AMap.Geocoder({
      city: '全国', //城市设为北京，默认：“全国”
      radius: 500, //范围，默认：500
    })

    geocoder.getAddress([cargps.value.longitude, cargps.value.latitude], function (status, result) {
      if (status === 'complete' && result.regeocode) {
        var address = result.regeocode.formattedAddress
        cargps.value.address = address
      } else {
        log.error('根据经纬度查询地址失败')
      }
    })

    // 创建一个 Icon
    var startIcon = new AMap.Icon({
      // 图标尺寸
      size: new AMap.Size(25, 35),
      // 图标的取图地址
      image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
      // 图标所用图片大小
      imageSize: new AMap.Size(25, 35),
      // 图标取图偏移量
      // imageOffset: new AMap.Pixel(-9, -3)
    })

    // 将 icon 传入 marker
    var startMarker = new AMap.Marker({
      position: new AMap.LngLat(cargps.value.longitude, cargps.value.latitude),
      icon: startIcon,
      offset: new AMap.Pixel(-13, -30),
    })

    map.value.add([startMarker])
  }
</script>

<style lang="less" scoped>
  .page-container {
    padding: 20px;
    .map-wrapper {
      width: 100%;
      border-radius: 0px 0px 0px 0px;
      .title-wrapper {
        position: relative;
        padding: 12px 20px;
        background: #f2f3f5;
        align-items: center;
        justify-content: center;
        .car {
          position: absolute;
          left: 20px;
          font-weight: 500;
          font-size: 16px;
          color: #1d2129;
          line-height: 24px;
        }
        .msg {
          font-weight: 400;
          font-size: 14px;
          color: #86909c;
          line-height: 20px;
        }
      }
      .bottom {
        padding: 20px;
        border: 1px solid #e5e6eb;
        .map {
          width: 100%;
          height: 591px;
          padding: 20px;
        }
      }
    }
  }
</style>
